<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		.box {
			display: flex;
			/* flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			align-content: flex-start; */
			width: 1300px;
			height: 500px;
			background-color: #ccc;
		}

		.box>div {
			width: 300px;
			height: 300px;
			background-color: #0f0;
			font-size: 50px;
			color: #fff;
			text-align: center;
			line-height: 300px;
		}

		.a {
			display: flex;
		}

		.a>div {
			font-size: 50px;

		}

		.a>div:nth-of-type(1) {
			width: 200px;
			height: 100vh;
			background-color: #ccc;
		}

		.a>div:nth-of-type(3) {
			width: 200px;
			height: 100vh;
			background-color: #eee;
		}

		.a>div:nth-of-type(2) {
			height: 100vh;
			background-color: #0f0;
			flex: 1;
		}

		.b {
			display: flex;
		}

		.b>.left {
			width: 300px;
			height: 100vh;
			background-color: #ccc;
		}

		.b>.right {
			flex: 1;
			height: 100vh;
			background-color: #0f0;
		}

		.b .top {
			height: 100px;
			background-color: antiquewhite;
		}

		.b .middle {
			height: calc(100% - 200px);
			background-color: #0f0;
		}

		.b .bottom {
			height: 100px;
			background-color: antiquewhite;
		}

		.c {
			width: 1000px;
			background-color: #ccc;
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;

		}

		.c>div {
			width: 33.3%;
			height: 100px;
			background-color: #0f0;
			border: 1px solid #ccc;
			margin-bottom: 20px;
		}
	</style>
</head>

<body>
	<!-- flex 父级属性 -->


	<!-- 属于子级的属性 -->
	<!-- order 排序 默认值 0  值越小越靠前  也可以为负数 -->
	<!-- <div class="box">
		<div>11</div>
		<div>22</div>
		<div style="order: -2;">33</div>
	</div> -->


	<!-- 当父盒子宽度大于子盒子总和时 -->
	<!-- flex-grow  放大  将剩余空间分配 放大默认值为0 -->
	<!-- (1300px - 900px) / (2 + 1)-->
	<!-- <div class="box">
		<div>11</div>
		<div style="flex-grow: 1;">22</div>
		<div style="flex-grow: 2;">33</div>
	</div> -->



	<!-- 当父盒子宽度小于子盒子总和时 -->
	<!-- flex-shrink 按比例缩小  默认为1 -->
	<!-- 300/10  270 270 60 -->
	<!-- <div class="box">
		<div>11</div>
		<div>22</div>
		<div style="flex-shrink: 4;">33</div>
	</div> -->


	<!-- flex-basis  主轴占比 -->
	<!-- 默认值  原盒子的大小  auto 权重比子盒子本身宽 高-->

	<!-- <div class="box">
		<div>11</div>
		<div>22</div>
		<div style="flex-basis: 500px;">33</div>
	</div> -->




	<!-- align-self  默认值  auto -->
	<!-- auto flex-start flex-end center -->
	<!-- 允许子级单个项  与其它项对齐方式不同 -->
	<!-- 依旧是和align-items 相对应   可以覆盖父级align-items ,但是如果设置的是align-content，这个属性就没有效果-->

	<!-- <div class="box">
		<div>11</div>
		<div>22</div>
		<div style="align-self: flex-end;">33</div>
	</div> -->




	<!-- 最常用  flex:1  占满剩余空间-->
	<!-- <div class="box">
		<div>11</div>
		<div>22</div>
		<div style="flex: 1;">33</div>
	</div> -->

	<!-- <div class="a">
		<div>11</div>
		<div>22</div>
		<div>33</div>
	</div> -->


	<!-- <div class="b">
		<div class="left"></div>
		<div class="right">
			<div class="top"></div>
			<div class="middle"></div>
			<div class="bottom"></div>
		</div>
	</div> -->

	<div class="c">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>









</body>

</html>